<extend name="Common/body"/>
<block name="exam">
<script type="text/javascript" src="__PUBLIC__/js/record/recorder.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/record/Fr.voice.js"></script>
<div class='exam container-fluid'>
	<div class="page-header">
		<h1>Independent Speaking <small>Question 1</small></h1>
	</div>
	<div class="text-center">
		<button type="button" id="loadq" class="btn btn-default">Load Question</button>
	</div>
	<div id="q" class="well" style="display: none;">{$ques.question} (Source: {$ques.source})</div>
	<div class="clock">
		<p id="clock"></p>
		<p class="boom">Time out!</p>
	</div>
	<div class="text-center tool-box" style="display: none;">
		<a href="#" id="play-record" class="btn btn-default">Play the record</a>
		<a href="#" id="reload" class="btn btn-default">Continue to practice Q1</a>
		<a href="#" id="omt" class="btn btn-default">One more time</a>
	</div>
</div>
<audio src="" id="audio"></audio>
<audio id="pre-beep" src="__PUBLIC__/media/prepare-tip.m4a"></audio>
<audio id="test-beep" src="__PUBLIC__/media/test-tip.m4a"></audio>
<audio id="finished-beep" src="__PUBLIC__/media/beep.m4a"></audio>
</block>
<block name="script">
<script type="text/javascript">
$(function(){
	$("#spk").addClass('active');
	var pt = 15;
	var rt = 45;
	function setCounter(prepareTime, testTime){
		$('#clock').pietimer({
			seconds: prepareTime,
			color: '#43AEFA',
			height: 100,
			width: 100
		},function(){
			setCounterTest(testTime);
			var testAudio = document.getElementById("test-beep");
			testAudio.loop = false;
			testAudio.addEventListener('ended', function () {
				Fr.voice.record($("#live").is(":checked"), function(){});
    			$('#clock').pietimer('start');
			}, false);
			testAudio.play();
		});
	}
	function setCounterTest(sec){
		$('#clock').pietimer({
			seconds: sec,
			color: '#43AEFA',
			height: 100,
			width: 100
		},function(){
			//setCounter(sec)
			Fr.voice.pause();
			var finAudio = document.getElementById("finished-beep");
			finAudio.play();
			$('.boom').show('slow');
			$('.tool-box').show('slow');
		});
	}
	$('.boom').hide();
		
	$('button#loadq').click(function(){
		$('button#loadq').attr("disabled", 'true');
		$('.boom').hide();
		$('#q').show();
		$('.tool-box').hide();
		setCounter(pt, rt);
		var audio = document.getElementById("pre-beep"); 
		audio.loop = false;
		audio.addEventListener('ended', function () {  
    		$('#clock').pietimer('start');
		}, false);
		audio.play();
		return false;
	});
	$('#reload').click(function(){
		window.location.reload();
	});
	$('#omt').click(function(){
		$("button#loadq").trigger("click");
	});
	$('#play-record').click(function(){
		Fr.voice.export(function(url){
	      	$("#audio").attr("src", url);
	      	$("#audio")[0].play();
    	}, "URL");
    	Fr.voice.stop();
	});
});
</script>
</block>
</extend>